<template>
  <van-popup
    v-model:show="show"
    round
    position="bottom"
    :style="{ height: '60vh' }"
  >
    <div class="play_popup u-f u-f-column">
      <p class="head_title">
        当前播放<span class="num">({{ playlist.length }})</span>
      </p>
      <div class="operate u-f u-f-ac u-f-jsb">
        <span class="play_type_box">
          <i class="iconfont icon-xunhuan"></i>
          列表循环
        </span>
        <i class="iconfont icon-shanchu1" @click="deleteAll"></i>
      </div>
      <!--  -->
      <div class="main">
        <div
          class="song_list u-f u-f-ac"
          v-for="(song, index) in playlist"
          :key="song.id"
          @click="playSong(song, index)"
        >
          <p
            class="label u-f1 van-ellipsis"
            :class="[currentPlaying.id === song.id ? 'active' : '']"
          >
            <span class="name">{{ song.name }}</span>
            <span class="author">
              -
              <span v-for="(item, i) in song.song.artists" :key="item.id">
                <span v-if="i === 0">{{ item.name }}</span>
                <span v-else>/{{ item.name }}</span>
              </span>
            </span>
          </p>
          <i
            class="iconfont icon-jiahao"
            @click.stop="deleteOne(song.id, index)"
          ></i>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script lang="ts">
import { computed, ComputedRef, defineComponent, Ref, ref } from 'vue'
import { Store, useStore } from 'vuex'

const handleVisible = () => {
  const show: Ref<boolean> = ref(false)

  const open = () => {
    show.value = true
  }

  const close = () => {
    show.value = false
  }

  return {
    show,
    open,
    close,
  }
}

const handleList = (store: Store<any>, playlist: ComputedRef<Array<any>>) => {
  const deleteOne = (id: number, index: number) => {
    let i = index
    const len = playlist.value.length

    playlist.value.splice(i, 1)
    store.commit('setPlaylist', playlist.value)

    if (len <= 1) {
      store.commit('setCurrentPlaying', {})
      return false
    }

    if (id !== store.state.currentPlaying.id) return false

    // 处理删除的是当前播放的歌曲
    if (i < len - 1) {
      store.commit('setPlayIndex', i)
      store.commit('setCurrentPlaying', playlist.value[i])
    } else if (i === len - 1) {
      store.commit('setPlayIndex', 0)
      store.commit('setCurrentPlaying', playlist.value[0])
    }
  }

  const deleteAll = () => {
    store.commit('setPlaylist', [])
    store.commit('setPlayIndex', 0)
    store.commit('setCurrentPlaying', {})
  }

  const playSong = (song: any, index: number) => {
    if (song.id === store.state.currentPlaying.id) return false
    store.commit('setPlayIndex', index)
    store.commit('setCurrentPlaying', playlist.value[index])
  }

  return {
    deleteOne,
    deleteAll,
    playSong,
  }
}

export default defineComponent({
  name: 'PlayListPopup',
  setup() {
    const store = useStore()
    const playlist = computed(() => store.state.playlist)
    const currentPlaying = computed(() => store.state.currentPlaying)

    const { show, open, close } = handleVisible()

    const { deleteOne, deleteAll, playSong } = handleList(store, playlist)

    return {
      show,
      playlist,
      currentPlaying,
      open,
      close,
      deleteOne,
      deleteAll,
      playSong,
    }
  },
})
</script>

<style lang="less" scoped>
.play_popup {
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  .head_title {
    width: 100%;
    font-size: 20px;
    color: var(--sky-text-black-color);
    font-weight: 700;
    padding: 0 16px;
    margin-bottom: 10px;
    box-sizing: border-box;
    .num {
      font-size: 14px;
      color: var(--sky-text-gray6-color);
    }
  }

  .operate {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 16px;
    box-sizing: border-box;
    .play_type_box {
      font-size: 16px;
      color: var(--sky-text-black-color);
      .iconfont {
        color: var(--sky-text-gray6-color);
      }
    }
    .icon-shanchu1 {
      font-size: 16px;
      color: var(--sky-text-gray6-color);
    }
  }

  .main {
    flex-grow: 1;
    padding: 0 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    .song_list {
      height: 42px;
      .label {
        width: 0;
        &.active {
          .name,
          .author {
            color: var(--sky-text-red-color);
          }
        }
        .name {
          font-size: 16px;
          color: var(--sky-text-black-color);
          margin-right: 3px;
        }
        .author {
          font-size: 14px;
          color: var(--sky-text-gray6-color);
        }
      }
      .icon-jiahao {
        font-size: 16px;
        color: var(--sky-text-gray6-color);
        transform: rotate(45deg);
        margin-left: 30px;
      }
    }
  }
}
</style>